<template>
    <div class="index" v-loading="loading">
      <el-card v-if="wallet.memberType">
        <div slot="header" class="clearfix">
          <span>余额信息</span>
        </div>
        <el-row>
         <el-col :span="8">
            <span>账户类型：{{ initMemberTypeFun(wallet.memberType)}}</span>
         </el-col>
         <el-col :span="8">
            <span>账户号：{{ wallet.memberNo }}</span>
         </el-col>
         <el-col :span="8">
            <span>账户Id：{{ wallet.channelAcctNo }}</span>
         </el-col>
      </el-row>
      <el-row>
         <el-col :span="8">
            <span>账户余额：{{ (wallet.totalBalance / 100).toFixed(2) }}</span>
         </el-col>
         <el-col :span="8">
            <span>冻结余额：{{  ((wallet.totalBalance  -  wallet.availableBalance) / 100).toFixed(2)}}</span>
         </el-col>
         <el-col :span="8">
            <span>可提现余额：{{ (wallet.availableBalance / 100).toFixed(2) }}</span>
            <el-button  style="margin-left:10px;" size="mini" type="primary" v-if="roleId == 5" @click="withdrawClick">提现</el-button>
         </el-col>
      </el-row>
      </el-card>
      <el-card style="margin-top:20px" v-if="ent_base_info.reg_name">
      <div slot="header" class="clearfix">
        <span>基本信息</span>
      </div>
      <el-row>
         <el-col :span="24">
            <span>用户类型：企业</span>
         </el-col>
      </el-row>
      <el-row>
         <el-col :span="8">
            <span> 企业全称：{{ ent_base_info.reg_name }}</span>
         </el-col>
         <el-col :span="8">
            <span> 统一信用代码：{{ ent_base_info.license_code  }}</span>
         </el-col>
         <el-col :span="8">
            <span>证照有效期：{{ ent_base_info.license_validity_type == 0 ? ent_base_info.license_begin_date - ent_base_info.license_end_date : ent_base_info.license_begin_date +' - 永久'}}</span>
         </el-col>
      </el-row>
      <el-row>
         <el-col :span="24">
          <span> 注册地址：{{ ent_base_info.reg_detail}}</span>
         </el-col>
         <!-- <el-col :span="8">
          <span> 备注：{{ indv_base_info.}}</span>
         </el-col> -->
      </el-row>
      <el-row>
         <el-col :span="8">
          <span> 法人姓名：{{ ent_base_info.legal_name }}</span>
         </el-col>
         <el-col :span="8">
          <span> 法人证件类型：{{ initCertTypeFun(ent_base_info.legal_cert_type)  }}</span>
         </el-col>
         <el-col :span="8">
           <span> 法人证件号：{{ ent_base_info.legal_cert_no }}</span>
         </el-col>
      </el-row>
      <el-row>
         <el-col :span="8">
           <span> 法人证件有效期：{{ ent_base_info.legal_cert_validity_type == 0 ? ent_base_info.legal_cert_begin_date + ' - ' + ent_base_info.legal_cert_end_date : ent_base_info.legal_cert_begin_date +' - 永久' }}</span>
         </el-col>
         <el-col :span="8">
           <span> 联系人姓名：{{ ent_base_info.contact_name }}</span>
         </el-col>
         <el-col :span="8">
           <span> 联系人手机号：{{ ent_base_info.contact_mobile_no }}</span>
         </el-col>
      </el-row>
      <el-row>
         <el-col :span="8">
           <span> 联系人邮箱：{{ ent_base_info.contact_email }}</span>
         </el-col>
         <el-col :span="8">
           <span> 结算账号类型：{{ ent_base_info.card_type == 0 ? '对公' : ent_base_info.card_type == 1 ? '对私（法人）' : '对私（非法人）' }}</span>
         </el-col>
         <el-col :span="8">
           <span> 结算账户名：{{ qry_cash_card_info_list[0] && qry_cash_card_info_list[0].card_name }}</span>
         </el-col>
      </el-row>
      <el-row>
         <el-col :span="8">
           <span> 结算账户号：{{ qry_cash_card_info_list[0] && qry_cash_card_info_list[0].card_no }}</span>
         </el-col>
         <el-col :span="8">
           <span> 绑卡序列号：{{ qry_cash_card_info_list[0] && qry_cash_card_info_list[0].token_no }}</span>
         </el-col>
         <el-col :span="8">
           <span> 银行（总行）：{{ qry_cash_card_info_list[0] && qry_cash_card_info_list[0].bank_name}}</span>
         </el-col>
      </el-row>
      <el-row>
         <el-col :span="8">
           <span> 支行名称：{{ qry_cash_card_info_list[0] && qry_cash_card_info_list[0].branch_name }}</span>
         </el-col>
         <el-col :span="8">
           <span> 联行号：{{ qry_cash_card_info_list[0] && qry_cash_card_info_list[0].branch_code }}</span>
         </el-col>
         <!-- <el-col :span="8">
           <span> 企业开户许可证号：{{ qry_cash_card_info_list[0] && qry_cash_card_info_list[0].card_no }}</span>
         </el-col> -->
      </el-row>
</el-card>
      <el-card style="margin-top:20px" v-if="indv_base_info.name">
      <div slot="header" class="clearfix">
        <span>基本信息</span>
      </div>
      <el-row>
         <el-col :span="24">
            <span>用户类型：个人</span>
         </el-col>
      </el-row>
      <el-row>
         <el-col :span="8">
            <span> 个人姓名：{{ indv_base_info.name }}</span>
         </el-col>
         <el-col :span="8">
            <span> 证件类型：{{ initCertTypeFun(indv_base_info.cert_type)  }}</span>
         </el-col>
         <el-col :span="8">
            <span>证件有效期：{{ indv_base_info.cert_validity_type == 0 ? indv_base_info.cert_begin_date + ' - ' + indv_base_info.cert_end_date : indv_base_info.cert_begin_date +' - 永久'}}</span>
         </el-col>
      </el-row>
      <el-row>
         <el-col :span="8">
          <span> 证件号：{{ indv_base_info.cert_no }}</span>
         </el-col>
         <el-col :span="8">
          <span> 手机号：{{ indv_base_info.mobile_no }}</span>
         </el-col>
         <el-col :span="8">
           <span> 邮箱：{{ indv_base_info.email }}</span>
         </el-col>
      </el-row>
      <el-row>
         <el-col :span="8">
          <span> 地址:{{ indv_base_info.address}}</span>
         </el-col>
         <!-- <el-col :span="8">
          <span> 备注：{{ indv_base_info.}}</span>
         </el-col> -->
      </el-row>
      <el-row>
         <el-col :span="8">
           <span> 绑卡序列号:{{ qry_cash_card_info_list[0] && qry_cash_card_info_list[0].token_no }}</span>
         </el-col>
         <el-col :span="8">
           <span> 银行（总行）：{{ qry_cash_card_info_list[0] && qry_cash_card_info_list[0].bank_name }}</span>
         </el-col>
         <el-col :span="8">
           <span> 结算账号：{{ qry_cash_card_info_list[0] && qry_cash_card_info_list[0].card_no }}</span>
         </el-col>
      </el-row>
</el-card>
<el-card style="margin-top:20px" v-if="settle_config">
      <div slot="header" class="clearfix">
        <span>结算配置</span>
      </div>
      <el-row>
         <el-col :span="8">
            <span> 结算周期：{{ settle_config.settle_cycle}}</span>
         </el-col>
         <el-col :span="8">
            <span> 结算手续费外扣标记：{{ settle_config.out_settle_flag == 1 ? '外扣' : '内扣'}}</span>
         </el-col>
         <el-col :span="8">
            <span>起结金额：{{ settle_config.min_amt }}</span>
         </el-col>
      </el-row>
      <el-row>
         <el-col :span="8">
          <span> 留存金额：{{ settle_config.remained_amt }}</span>
         </el-col>
         <el-col :span="8">
          <span> 结算摘要：{{ settle_config.settle_abstract}}</span>
         </el-col>
         <el-col :span="8" v-if="settle_config.out_settle_huifuid">
          <span> 外扣手续费承担方的汇付ID：{{ settle_config.out_settle_huifuid}}</span>
         </el-col>
      </el-row>
 </el-card>
 <el-card style="margin-top:20px" v-if="qry_cash_config_list.length > 0">
      <div slot="header" class="clearfix">
        <span>取现配置</span>
      </div>
      <div v-for="item in qry_cash_config_list" v-if="item.switch_state == 1" :key="item.cash_type">
        <el-divider content-position="left">{{ item.cash_type }}取现配置</el-divider>
      <el-row>
         <el-col :span="8">
           <span> 是否开通：{{ item.switch_state == '0' ? '未开通' : '已开通' }}</span>
         </el-col>
         <el-col :span="8">
           <span> 提现手续费(固定/元)：{{ item.fix_amt }}元</span>
         </el-col>
         <el-col :span="8">
           <span> 费率(百分比/%)：{{ item.fee_rate}}%</span>
         </el-col>
      </el-row>
      <el-row>
         <el-col :span="8">
           <span> 手续费内外扣标记：{{ item.out_cash_flag == '1' ? '外扣' : '内扣'}}</span>
         </el-col>
      </el-row>
      </div>
</el-card>
<el-card style="margin-top:20px">
      <div slot="header" class="clearfix">
        <span>图片资料</span>
      </div>
      <el-row>
         <el-col style="display:flex;justify-content:center;" :span="6" v-for="(item,index) in file_list" :key="index">
            <el-image 
              style="width: 124px; height: 124px"
              :src="item" 
              :preview-src-list="file_list">
            </el-image>
         </el-col>
      </el-row>
</el-card>
<el-card style="margin-top:20px">
      <div style="display:flex;justify-content:center;"> 
         <el-button type="primary" icon="el-icon-back" @click="toBack" style="color:#fff;">返回</el-button>
      </div>
</el-card>
<el-dialog
   title="基本户用户提现"
   :visible.sync="withdrawVisible"
   width="900px"
   >
   <el-form :model="withdrawForm"  :rules="withdrawFormRules" ref="withdrawFormRules" label-width="150px" >
     <el-card >
      <el-form-item label="可提现金额" >
          <span> {{ (wallet.availableBalance / 100).toFixed(2) }} </span>
       </el-form-item>
       <el-form-item label="提现金额(元)" prop="cash_amt">
         <el-input type="number" @blur="cashAmtBlur "  v-model="withdrawForm.cash_amt" placeholder="请输入提现金额(元)" clearable  />
       </el-form-item>
       <el-form-item label="到账方式" prop="into_acct_date_type">
         <el-radio-group v-model="withdrawForm.into_acct_date_type" @input="userTypeChange">
             <el-radio v-for="item in qry_cash_config_list" v-if="item.switch_state == 1" :key="item.cash_type" :label="item.cash_type" >{{ item.cash_type == 'T1' ? `下一工作日24:00前（${item.cash_type}）` : `当日到账（${item.cash_type}）` }}</el-radio>
          </el-radio-group>
       </el-form-item>
       <el-form-item label="提现备注" >
         <el-input type="textarea" :rows="2" show-word-limit v-model="withdrawForm.remark" maxlength="100" placeholder="请输入提现备注"   />
       </el-form-item>
       <!-- <el-form-item label="交易密码" >
          <el-input  v-model="withdrawForm.fee_rate" style="width:180px;" placeholder="请输入交易密码"   />
       </el-form-item> -->
    </el-card>
    <!-- <el-card style="margin-top:20px">
      <div slot="header" class="clearfix">
        <span>请选择到账银行卡</span>
      </div>
      <el-radio size="medium" v-model="form.radio1" label="1" border>
         <el-row>
           <el-col :span="24">
              <span>账户类型 对私法人</span>
           </el-col>
        </el-row>
        <el-row>
           <el-col :span="24">
              <span>结算账户名 陈明</span>
           </el-col>
        </el-row>
        <el-row>
           <el-col :span="24">
              <span>账户类型 623058*********7303</span>
           </el-col>
        </el-row>
        <el-row>
           <el-col :span="24">
              <span>银行名称 平安银行</span>
           </el-col>
        </el-row>
      </el-radio>
   </el-card> -->
   <!-- <el-card style="margin-top:20px" class="protocol">
      <el-checkbox  v-model="form.userType">我已阅读并同意</el-checkbox>
      <span style="color:#0d6eff;cursor:pointer;"> 《用户取现协议》 </span>
   </el-card> -->
</el-form>
   <span slot="footer" class="dialog-footer">
        <el-button @click="withdrawVisible = false">取 消</el-button>
        <el-button type="primary"   @click="enchashmentClick">确 定</el-button>
    </span>
</el-dialog>
    </div>
</template>

<script>
import { basicdataQuery , enchashment} from '@/api/fetchApi.js'
export default{
    data(){
        return{
            loading:true,
            withdrawForm:{},
            indv_base_info:{}, //个人用户基本信息
            ent_base_info:{}, //企业用户基本信息
            qry_cash_card_info_list:{}, // 取现卡信息
            qry_cash_config_list:[], // 取现配置列表
            settle_config:{}, //结算信息配置
            wallet:{}, //钱包
            form:{},
            merchantId:'',
            file_list:[],
            withdrawFormRules:{
             cash_amt:[{ required: true, message: '请输入提现金额', trigger: 'change' },
               {required: true, validator:(rule , value , callback)=>{
                    if(value *1  > (this.wallet.availableBalance * 1 / 100)){
                      callback(new Error('可提现金额余额不足！'))
                    }else{
                     if((value * 1) == 0){
                        callback(new Error('提现金额需大于0！'))
                     }else{
                        callback();
                     }
                    }
                 } }
             ],
             into_acct_date_type:[{ required: true, message: '请选择到账方式', trigger: 'change' }],
            },
            withdrawVisible:false,
            certificateList:[ {value:'00',label:'身份证'} , {value:'04',label:'回乡证'} , {value:'14',label:'台胞证'} , {value:'15',label:'港澳台居住证'} ],
            memberType:[{value:'1',lable:'基本户'},{value:'2',lable:'现金户'},{value:'3',lable:'延时户'}],
            roleId:''
        }
    },
    mounted(){
         this.roleId = JSON.parse(sessionStorage.getItem('userInfo')).rolesId
         this.initDetail()
    },
    methods:{
        async initDetail(){
          this.loading = true
          this.merchantId = this.$route.query.mid
          const res = await basicdataQuery({merchantId:this.$route.query.mid})
          if(res.code == 200){
            this.indv_base_info = res.data.indv_base_info ?  JSON.parse(res.data.indv_base_info) : {}
            this.qry_cash_card_info_list = res.data.qry_cash_card_info_list ?  JSON.parse(res.data.qry_cash_card_info_list) : {}
            this.qry_cash_config_list = res.data.qry_cash_config_list ?  JSON.parse(res.data.qry_cash_config_list) : {}
            //  console.log(this.qry_cash_config_list)
            this.ent_base_info = res.data.ent_base_info ?  JSON.parse(res.data.ent_base_info) : {}
            this.settle_config = res.data.settle_config ? JSON.parse(res.data.settle_config) : {}
            this.wallet = res.data.wallet || {}
            this.file_list =  res.data.file_list.map(item=>item.file_url)
            this.loading = false
          }else{
            this.loading = false
            this.$message.error(res.message)
          }
        },
        withdrawClick(){
           this.withdrawVisible = true
           this.withdrawForm = {}
           setTimeout(()=>{
            this.$refs.withdrawFormRules.clearValidate()
           })
        },
        cashAmtBlur(v){
         // console.log(v)
            if(this.withdrawForm.cash_amt){
               this.withdrawForm.cash_amt = (this.withdrawForm.cash_amt * 1).toFixed(2)
            }
        },
        initMemberTypeFun(v){
            const data = this.memberType.find(item=>item.value == v)
            if(data){
                return data.lable
            }
        },
        async enchashmentClick(){
           const valid = await  this.$refs.withdrawFormRules.validate()
           if(valid){
            this.withdrawForm.merchantId = this.merchantId
            this.withdrawForm.token_no = this.qry_cash_card_info_list[0].token_no
            const res =  await enchashment(this.withdrawForm)  
            if(res.code == 200){
              this.initDetail()
              this.$message.success('提现成功！')
              this.withdrawVisible = false
            }else{
              this.$message.error(res.message)
            }
           }
        },
        initCertTypeFun(v){
          const data = this.certificateList.find(item=>item.value == v)
          if(data){
            return data.label
          }
        },
        toBack(){
            this.$router.push({
              path: "/walletmember",
           })
        }
    }
}
</script>
<style scoped>
 .index{
   width: 100%;
   height: 100%;
   overflow-y: auto;
 }
 .index span{
    color: #4e5969;
    font-size:14px;
   }
   .index .el-col{
      margin-bottom:15px;
   }
   .el-button span{
    color: #fff;
    font-size: 14px;
   }
   ::v-deep .el-radio--medium.is-bordered{
      display: flex;
      align-items: center;
      height: 140px;
      width: 100%;
   }
   ::v-deep .el-radio__label{
      margin-left:20px;
   }
   ::v-deep .protocol > .el-checkbox__input.is-checked+.el-checkbox__label{
      color:#4e5969 !important;
   }
</style>